<script setup>
const props = defineProps({
  title: {
    type: String,
  },
});
</script>
<template>
  <div class="content-box">
    <div class="title-box">
      <div class="text-box">{{ title }}</div>
    </div>
    <div class="line"></div>
  </div>
</template>
<style scoped lang="less">
.content-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
  width: 100%;
}
.title-box {
  margin: auto;
  width: 80%;
  border-bottom: 1px solid #1e9ab5;
  .text-box {
    width: 100px;
    text-align: center;
    background: linear-gradient(-135deg, transparent 10px, #1e9ab5 0);
    color: white;
    font-size: 20px;
    font-weight: 500;
    padding: 3px 20px;
  }
}
.line {
  margin-top: 8px;
  margin-left: 70%;
  right: 0;
  width: 15%;
  border-bottom: 1px solid #c2c9ca;
}
</style>
